<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <el-dialog v-bind="$attrs"
               :visible.sync="dialogVisible"
               width="60%"
               :append-to-body="true"
               :close-on-click-modal="false"
               v-on="$listeners" @open="onOpen" @close="onClose" :title="dialogTitle">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
          <el-col :span="12">
            <el-form-item label="字典名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入字典名称" :maxlength="20" show-word-limit
                        clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字典编码" prop="code">
              <el-input v-model="formData.code" placeholder="请输入字典编码" :maxlength="20" show-word-limit
                        clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注或说明" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注或说明" :maxlength="200"
                        show-word-limit :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
               :visible.sync="info.dialogVisible"
               width="60%"
               :append-to-body="true"
               :close-on-click-modal="false"
               @open="infoOnOpen" @close="infoOnClose" :title="info.dialogTitle">
      <el-row :gutter="15">
        <el-form ref="infoElForm" :model="info.formData" :rules="info.rules" size="small" label-width="100px">
          <el-col :span="12">
            <el-form-item label="选项名称" prop="label">
              <el-input v-model="info.formData.label" placeholder="请输入选项名称" :maxlength="20" show-word-limit
                        clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选项值" prop="value">
              <el-input v-model="info.formData.value" placeholder="请输入选项值" :maxlength="20" show-word-limit
                        clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="disabled">
              <el-switch v-model="info.formData.disabled"
                         active-text="启用"
                         :active-value="false"
                         :inactive-value="true"
                         inactive-text="禁用"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示顺序" prop="sort">
              <el-input-number v-model="info.formData.sort" placeholder="显示顺序" :step='1'></el-input-number>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="infoClose">取消</el-button>
        <el-button type="primary" @click="infoHandelConfirm">确定</el-button>
      </div>
    </el-dialog>

    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->

      <!-- ------------- 快捷按钮 ------------- -->

      <div class="c-title">字典管理</div>
      <el-row :gutter="15">
        <el-col :span="12">
          <div class="fast-btn">
            <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true;dialogTitle='新增字典';">
              新增
            </el-button>
            <div class="c-item">
              <el-form :inline="true" @submit.native.prevent>
                <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="p.name"
                    clearable>
                </el-input>
              </el-form>
            </div>
          </div>
          <el-table
              ref="dictTable"
              :data="dictData"
              style="width: 100%"
              @row-click="nodeClick"
              highlight-current-row
              max-height="450">
            <el-table-column type="selection" width="40" align="center"></el-table-column>
            <el-table-column
                prop="name"
                min-width="60"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="code"
                min-width="60"
                label="编码">
            </el-table-column>
            <el-table-column
                prop="remark"
                :show-overflow-tooltip="true"
                min-width="60"
                label="备注">
            </el-table-column>
            <el-table-column
                min-width="80"
                label="操作">
              <template slot-scope="scope">
                <el-link type="primary" @click.stop="edit(scope.row.id)">修改</el-link>

                <el-popconfirm
                    trigger="hover"
                    @confirm="del(scope.row.id)"
                    title="确认删除此字典？删除后系统中如果有使用该字典值的话，会出现错误！！"
                >
                  <el-link type="danger" slot="reference" @click.stop="">删除</el-link>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-box">
            <el-pagination background
                           layout="total, prev, pager, next, sizes, jumper"
                           :current-page.sync="p.current"
                           :page-size.sync="p.size"
                           :total="p.total"
                           :page-sizes="[10, 20, 30, 40, 50, 100]"
                           @current-change="f5()"
                           @size-change="f5()">
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="fast-btn">
            <el-button type="primary" icon="el-icon-plus"
                       :disabled="clickRow === undefined"
                       @click="info.dialogVisible = true;info.dialogTitle='新增字典值---'+clickRow.name;">
              新增
            </el-button>
            <div class="c-item">
              <el-form :inline="true" @submit.native.prevent>
                <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="info.p.label"
                    clearable>
                </el-input>
              </el-form>
            </div>
          </div>
          <el-table
              ref="infoDictTable"
              :data="info.dictData"
              style="width: 100%"
              highlight-current-row
              max-height="450">
            <el-table-column type="selection" width="40" align="center"></el-table-column>
            <el-table-column
                prop="label"
                min-width="60"
                label="选项名称">
            </el-table-column>
            <el-table-column
                prop="value"
                min-width="60"
                label="选项值">
            </el-table-column>
            <el-table-column
                min-width="120"
                label="状态">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.disabled"
                           @change="infoChange($event,scope.row.id)"
                           :active-value="false"
                           :inactive-value="true"
                           active-text="启用"
                           inactive-text="禁用"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column
                prop="sort"
                :show-overflow-tooltip="true"
                min-width="60"
                label="排序">
            </el-table-column>
            <el-table-column
                min-width="80"
                label="操作">
              <template slot-scope="scope">
                <el-link type="primary" @click.stop="infoEdit(scope.row.id)">修改</el-link>

                <el-popconfirm
                    trigger="hover"
                    @confirm="infoDel(scope.row.id)"
                    title="确认删除此字典？删除后系统中如果有使用该字典值，程序将会出现无法预知的错误！！"
                >
                  <el-link type="danger" slot="reference" @click.stop="">删除</el-link>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-box">
            <el-pagination background
                           layout="total, prev, pager, next, sizes, jumper"
                           :current-page.sync="info.p.current"
                           :page-size.sync="info.p.size"
                           :total="info.p.total"
                           :page-sizes="[10, 20, 30, 40, 50, 100]"
                           @current-change="f5()"
                           @size-change="f5()">
            </el-pagination>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
let PATH = "/dict"
module.exports = {
  components: {},
  watch: {
    'p.name': function () {
      this.f5()
    },
    'info.p.label': function () {
      this.infoF5()
    }
  },
  data() {
    return {
      clickRow: undefined,
      formData: {
        name: "",
        code: undefined,
        remark: "",
        sort: 0,
        version: 0
      },
      dictValue: [],
      rules: {
        name: [{
          required: true,
          message: '请输入字典名称',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入字典编码',
          trigger: 'blur'
        }],
        remark: [],
      },
      dictData: [],
      p: {
        // 搜索条件
        name: '',
        current: 1,
        size: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '',
      info:{
        formData: {
          label: "",
          value: undefined,
          sort: 0,
          disabled: false,
          version: 0
        },
        dictValue: [],
        rules: {
          label: [{
            required: true,
            message: '请输入选项名称',
            trigger: 'blur'
          }],
          value: [{
            required: true,
            message: '请输入选项值',
            trigger: 'blur'
          }],
        },
        dictData: [],
        p: {
          // 搜索条件
          label: '',
          current: 1,
          size: 10,
          total: 0
        },
        dialogVisible: false,
        dialogTitle: '',
      },
    }
  },
  methods: {
    nodeClick(row) {
      this.clickRow = row
      setTimeout(()=>{
        this.infoF5()
      },100)
    },
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
      this.formData = {
        name: "",
        code: undefined,
        remark: "",
        sort: 0
      };
    },
    close() {
      this.dialogVisible = false
    },
    infoChange(status,id){
      sa.ajax(PATH + "/info/save-or-update", {id: id,disabled: status}, (res) => {
        sa.msgOk(res.msg, () => {
          this.infoF5();
        })
      }, {})
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        sa.ajax(PATH + "/save-or-update", this.formData, (res) => {
          sa.alert(res.msg, () => {
            this.f5();
            this.close()
          })
        }, {})
      })
    },
    edit(id) {
      sa.ajax(PATH + '/get', {id: id}, (res) => {
        this.formData = res.data
        this.dialogTitle = '编辑字典'
        this.dialogVisible = true
      }, {type: 'get'})
    },
    del(id) {
      sa.ajax(PATH + '/del', {id: id}, (res) => {
        sa.alert(res.msg, () => {
          this.f5()
        })
      }, {type: 'get', msg: null})
    },
    f5() {
      sa.ajax(PATH + '/list', this.p, (res) => {
        this.dictData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    },
    infoOnOpen() {
    },
    infoOnClose() {
      this.$refs['infoElForm'].resetFields()
      this.info.formData = {
        label: "",
        value: undefined,
        sort: 0,
        version: 0,
        disabled: false,
        dictCode: undefined
      };
    },
    infoClose() {
      this.info.dialogVisible = false
    },
    infoHandelConfirm() {
      this.info.formData.dictCode=this.clickRow.code
      this.$refs['infoElForm'].validate(valid => {
        if (!valid) return
        sa.ajax(PATH + "/info/save-or-update", this.info.formData, (res) => {
          sa.alert(res.msg, () => {
            this.infoF5();
            this.infoClose();
          })
        }, {})
      })
    },
    infoEdit(id) {
      sa.ajax(PATH + '/info/get', {id: id}, (res) => {
        this.info.formData = res.data
        this.info.dialogTitle = '编辑字典选项--'+this.clickRow.name
        this.info.dialogVisible = true
      }, {type: 'get'})
    },
    infoDel(id) {
      sa.ajax(PATH + '/del', {id: id}, (res) => {
        sa.alert(res.msg, () => {
          this.f5()
        })
      }, {type: 'get', msg: null})
    },
    infoF5(){
      if (this.clickRow){
        sa.ajax(PATH + '/info/list', {dictCode: this.clickRow.code,...this.info.p}, (res) => {
          this.info.dictData = res.data
          this.info.p.total = res.dataCount
        }, {type: 'get'})
      }
    },
  },
  mounted() {
  },
  created() {
    this.f5()
  }
}
</script>

<style>
</style>
